<template>
  <div class="user-management-container">
   

    <!-- 搜索和操作区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>用户名:</label>
          <el-input
            v-model="searchForm.userName"
            placeholder="请输入用户名"
            clearable
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="search-item">
          <label>部门:</label>
          <el-select
            v-model="searchForm.departmentId"
            placeholder="请选择部门"
            clearable style="width: 200px;"
          >
            <el-option
              v-for="dept in departmentList"
              :key="dept.id"
              :label="dept.departmentName"
              :value="dept.id"
            />
          </el-select>
        </div>
        <div class="search-actions">
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div class="action-row">
        <div class="right-actions">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增用户
          </el-button>
         
         
        </div>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="main-content">
      <div class="table-container">
        <el-table
          :data="userList"
          v-loading="tableLoading || paginationLoading"
          :element-loading-text="tableLoading ? '正在加载用户数据...' : '正在切换页面...'"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          stripe
          style="width: 100%"
          class="user-table"
        >
          
          <el-table-column prop="userName" label="用户名" width="120" />
          <el-table-column prop="userNickname" label="真实姓名" width="120" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="userPhone" label="手机号" width="130" />
          <el-table-column prop="departmentName" label="所属部门" width="120" />
          <el-table-column prop="roleNames" label="角色" width="150">
            <template #default="scope">
              <el-tag
                v-for="role in scope.row.roles"
                :key="role.id"
                size="small"
                style="margin-right: 5px;"
              >
                {{ role.roleName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="创建时间" width="160" >
            <template #default="scope">
           
            {{ moment(scope.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="warning" @click="handleAssignRole(scope.row)">
                分配角色
              </el-button>
              <el-button 
                size="small" 
                :type="scope.row.status === 1 ? 'danger' : 'success'"
                @click="handleToggleStatus(scope.row)"
              >
                {{ scope.row.status === 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            :disabled="paginationLoading"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="custom-pagination"
          />
        </div>
      </div>
    </div>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userFormRules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!userForm.id">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码"  show-password/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="userForm.realName" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="所属部门" prop="departmentId">
          <el-select v-model="userForm.departmentId" placeholder="请选择部门" style="width: 100%">
            <el-option
              v-for="dept in departmentList"
              :key="dept.id"
              :label="dept.departmentName"
              :value="dept.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="userForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分配角色对话框 -->
    <el-dialog
      v-model="roleDialogVisible"
      title="分配角色"
      width="500px"
    >
      <div class="role-assignment">
        <p><strong>用户：</strong>{{ currentUser.userName }}</p>
        <el-divider />
        <div class="role-list">
          <el-checkbox-group v-model="selectedRoles">
            <el-checkbox
              v-for="role in allRoles"
              :key="role.id"
              :label="role.id"
            >
              {{ role.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="roleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRoleAssignment">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as userApi from '../../api/user'
import * as departmentApi from '../../api/department'
import * as roleApi from '../../api/role'
import moment from 'moment'



interface User {
  id: number
  userName: string  // 后端字段名
  realName: string
  email: string
  userPhone: string  // 后端字段名
  departmentId: number
  departmentName: string
  roles: Role[]
  status: number
  addTime: string  // 后端字段名
  userNickname:string
}

/**
 * 角色信息接口
 * 定义角色的基本信息结构
 */
interface Role {
  id: number
  roleName: string  // 后端字段名
  roleCode: string  // 后端字段名
  description: string
}

/**
 * 部门信息接口
 * 定义部门的基本信息结构
 */
interface Department {
  id: number
  departmentName: string  // 后端字段名
  departmentCode: string  // 后端字段名
  remark: string  // 后端字段名
}

/**
 * 搜索表单接口
 * 定义用户搜索的条件
 */
interface SearchForm {
  userName: string  // 后端字段名
  departmentId: number | null
}

/**
 * 用户表单接口
 * 定义新增/编辑用户时的表单数据
 */
interface UserForm {
  id?: number
  username: string
  password?: string  // 密码字段
  realName: string
  email: string
  phone: string
  departmentId: number | null
  status: number
  addProp:string
}

/**
 * 分页信息接口
 * 定义分页相关的参数
 */
interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

// ==================== 响应式数据 ====================
// 用户列表数据
const userList = ref<User[]>([])
// 部门列表数据
const departmentList = ref<Department[]>([])
// 所有角色列表
const allRoles = ref<Role[]>([])
// 表格加载状态
const tableLoading = ref(false)
// 分页加载状态
const paginationLoading = ref(false)
// 防抖定时器
let searchDebounceTimer: number | null = null
// 预加载缓存
const preloadCache = new Map<string, any>()
// 对话框显示状态
const dialogVisible = ref(false)
const roleDialogVisible = ref(false)
// 对话框标题
const dialogTitle = ref('')
// 当前操作用户
const currentUser = ref<User>({} as User)
// 选中的角色
const selectedRoles = ref<number[]>([])

// 搜索表单
const searchForm = reactive<SearchForm>({
  userName: '',  // 后端字段名
  departmentId: null
})

// 用户表单
const userForm = reactive<UserForm>({
  username: '',
  password: '',  // 密码字段
  realName: '',
  email: '',
  phone: '',
  departmentId: null,
  status: 1,
  addProp:"",
})

// 分页信息
const pagination = reactive<Pagination>({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表单引用
const userFormRef = ref<FormInstance>()

// ==================== 表单验证规则 ====================
/**
 * 用户表单验证规则
 * 定义各个字段的验证条件
 */
const userFormRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
 
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
 
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  departmentId: [
    { required: true, message: '请选择部门', trigger: 'change' }
  ]
}

// ==================== 生命周期钩子 ====================
/**
 * 组件挂载时初始化数据
 * 加载用户列表、部门列表和角色列表
 */
onMounted(() => {
  loadUserList()
  loadDepartmentList()
  loadAllRoles()
})

onUnmounted(() => {
  // 清理防抖定时器
  if (searchDebounceTimer) {
    clearTimeout(searchDebounceTimer)
  }
  // 清理缓存
  preloadCache.clear()
})

// ==================== 数据加载方法 ====================
/**
 * 加载用户列表
 * 根据搜索条件和分页参数获取用户数据
 */
const loadUserList = async (showLoading = true) => {
  try {
    if (showLoading) {
      tableLoading.value = true
    }
    
    // 生成缓存键
    const cacheKey = `userList_${searchForm.userName}_${searchForm.departmentId}_${pagination.currentPage}_${pagination.pageSize}`
    
    // 检查缓存
    if (preloadCache.has(cacheKey)) {
      const cachedData = preloadCache.get(cacheKey)
      userList.value = cachedData.list || []
      pagination.total = cachedData.count || 0
      if (showLoading) {
        tableLoading.value = false
      }
      return
    }
    
    const response = await userApi.getUserList({
      userName: searchForm.userName,  // 后端字段名
      departmentId: searchForm.departmentId,
      page: pagination.currentPage,
      size: pagination.pageSize
    })
    
    if (response.data.code==200) {
      const data = response.data.data
      userList.value = data.list || []
      pagination.total = data.count || 0
      
      // 缓存数据
      preloadCache.set(cacheKey, data)
      
      // 预加载下一页数据（如果存在）
      if (pagination.currentPage < Math.ceil(pagination.total / pagination.pageSize)) {
        preloadNextPage()
      }
    } else {
      ElMessage.error(response.data.message || '加载用户列表失败')
    }
  } catch (error) {
    ElMessage.error('加载用户列表失败')
    console.error('加载用户列表失败:', error)
  } finally {
    if (showLoading) {
      tableLoading.value = false
    }
  }
}

/**
 * 预加载下一页数据
 */
const preloadNextPage = async () => {
  const nextPage = pagination.currentPage + 1
  const cacheKey = `userList_${searchForm.userName}_${searchForm.departmentId}_${nextPage}_${pagination.pageSize}`
  
  if (!preloadCache.has(cacheKey)) {
    try {
      const response = await userApi.getUserList({
        userName: searchForm.userName,
        departmentId: searchForm.departmentId,
        page: nextPage,
        size: pagination.pageSize
      })
      
      if (response.data.code === 200) {
        preloadCache.set(cacheKey, response.data.data)
      }
    } catch (error) {
      console.warn('预加载下一页失败:', error)
    }
  }
}

/**
 * 加载部门列表
 * 获取所有部门信息用于下拉选择
 */
const loadDepartmentList = async () => {
  try {
    const response = await departmentApi.getAllDepartments()
    
    if (response.data.code === 200) {
      departmentList.value = response.data.data || []
    } else {
      ElMessage.error(response.data.message || '加载部门列表失败')
    }
  } catch (error) {
    ElMessage.error('加载部门列表失败')
    console.error('加载部门列表失败:', error)
  }
}

/**
 * 加载所有角色列表
 * 获取所有角色信息用于分配
 */
const loadAllRoles = async () => {
  try {
    const response = await roleApi.getAllRoles()
    
    if (response.data.code === 200) {
      allRoles.value = response.data.data || []
    } else {
      ElMessage.error(response.data.message || '加载角色列表失败')
    }
  } catch (error) {
    ElMessage.error('加载角色列表失败')
    console.error('加载角色列表失败:', error)
  }
}

// ==================== 搜索和操作方法 ====================
/**
 * 执行搜索
 * 重置分页并重新加载数据
 */
const handleSearch = () => {
  // 清除之前的防抖定时器
  if (searchDebounceTimer) {
    clearTimeout(searchDebounceTimer)
  }
  
  // 设置防抖延迟
  searchDebounceTimer = setTimeout(() => {
    pagination.currentPage = 1
    // 清除缓存，因为搜索条件改变了
    preloadCache.clear()
    loadUserList()
  }, 300) // 300ms 防抖延迟
}

/**
 * 重置搜索条件
 * 清空搜索表单并重新加载数据
 */
const resetSearch = () => {
  searchForm.userName = ''  // 后端字段名
  searchForm.departmentId = null
  pagination.currentPage = 1
  loadUserList()
}

/**
 * 刷新数据
 * 重新加载当前页面的数据
 */
const refreshData = () => {
  loadUserList()
}

/**
 * 分页大小改变
 * 当用户改变每页显示数量时触发
 */
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  loadUserList()
}

/**
 * 当前页改变
 * 当用户切换页码时触发
 */
const handleCurrentChange = async (page: number) => {
  pagination.currentPage = page
  paginationLoading.value = true
  
  try {
    await loadUserList(false)
  } finally {
    // 延迟隐藏加载状态，让用户看到加载效果
    setTimeout(() => {
      paginationLoading.value = false
    }, 300)
  }
}

// ==================== 用户操作方法 ====================
/**
 * 新增用户
 * 打开新增用户对话框
 */
const handleAdd = () => {
  dialogTitle.value = '新增用户'
  resetForm()
  dialogVisible.value = true
}

/**
 * 编辑用户
 * 打开编辑用户对话框并填充数据
 */
const handleEdit = (user: User) => {
  dialogTitle.value = '编辑用户'
  Object.assign(userForm, {
    id: user.id,
    username: user.userName,  // 后端字段名
    password: '',  // 编辑时不显示密码
    realName: user.userNickname,
    email: user.email,
    phone: user.userPhone,  // 后端字段名
    departmentId: user.departmentId,
    status: user.status
  })
  dialogVisible.value = true
}

/**
 * 分配角色
 * 打开角色分配对话框
 */
const handleAssignRole = (user: User) => {
  currentUser.value = user
  selectedRoles.value = user.roles.map(role => role.id)
  roleDialogVisible.value = true
}

/**
 * 切换用户状态
 * 启用或禁用用户
 */
const handleToggleStatus = async (user: User) => {
  const action = user.status === 1 ? '禁用' : '启用'
  try {
    await ElMessageBox.confirm(
      `确定要${action}用户 "${user.userName}" 吗？`,  // 后端字段名
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await userApi.toggleUserStatus(user.id, user.status === 1 ? 0 : 1)
    
     if (response.data.code==200) {
      ElMessage.success(`${action}用户成功`)
      loadUserList()
    } else {
      ElMessage.error(response.data.message || `${action}用户失败`)
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(`${action}用户失败`)
      console.error(`${action}用户失败:`, error)
    }
  }
}

/**
 * 删除用户
 * 删除指定用户
 */
const handleDelete = async (user: User) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户 "${user.userName}" 吗？此操作不可恢复！`,  // 后端字段名
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await userApi.deleteUser(user.id)
    
     if (response.data.code==200) {
      ElMessage.success('删除用户成功')
      loadUserList()
    } else {
      ElMessage.error(response.data.message || '删除用户失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除用户失败')
      console.error('删除用户失败:', error)
    }
  }
}



// ==================== 表单处理方法 ====================
/**
 * 重置表单
 * 清空表单数据
 */
const resetForm = () => {
  Object.assign(userForm, {
    id: undefined,
    username: '',
    password: '',  // 密码字段
    realName: '',
    email: '',
    phone: '',
    departmentId: null,
    status: 1
  })
  userFormRef.value?.clearValidate()
}

/**
 * 提交表单
 * 验证表单并提交数据
 */
const submitForm = async () => {
  if (!userFormRef.value) return
  
  try {
    await userFormRef.value.validate()
    
    // 构建提交数据
    const submitData = {
      id: userForm.id,
      userName: userForm.username,
      userPwd:  userForm.password, // 更新时不传密码
      realName: userForm.realName,
      email: userForm.email,
      userPhone: userForm.phone,
      departmentId: userForm.departmentId,
      status: userForm.status,
      addProp:localStorage.getItem("userNickname") || ''
    }
    
    const response = userForm.id 
      ? await userApi.updateUser(submitData)
      : await userApi.createUser(submitData)
    
    if (response.data.code==200) {
      ElMessage.success(userForm.id ? '更新用户成功' : '创建用户成功')
      dialogVisible.value = false
      loadUserList()
    } else {
      ElMessage.error(response.data.message || '保存用户失败')
    }
  } catch (error) {
    ElMessage.error('保存用户失败')
    console.error('保存用户失败:', error)
  }
}

/**
 * 提交角色分配
 * 保存用户的角色分配
 */
const submitRoleAssignment = async () => {
  try {
    const response = await userApi.assignUserRoles({
      userId: currentUser.value.id,
      roleIds: selectedRoles.value
    })
    
    if (response.data.code==200) {
      ElMessage.success('分配角色成功')
      roleDialogVisible.value = false
      loadUserList()
    } else {
      ElMessage.error(response.data.message || '分配角色失败')
    }
  } catch (error) {
    ElMessage.error('分配角色失败')
    console.error('分配角色失败:', error)
  }
}
</script>

<style scoped>
.user-management-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.search-section:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.search-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  white-space: nowrap;
  font-weight: 500;
}

.search-actions {
  margin-left: auto;
}

.search-actions .el-button {
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.search-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.right-actions .el-button {
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  padding: 10px 20px;
}

.right-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.right-actions .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.right-actions .el-button--primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.refresh-icon {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: color 0.3s;
}

.refresh-icon:hover {
  color: #409eff;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-container {
  padding: 20px;
}

.user-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.user-table:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-table .el-table__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.user-table .el-table__header th {
  background: transparent !important;
  color: white;
  font-weight: 600;
  border: none;
}

.user-table .el-table__body tr {
  transition: all 0.2s ease;
}

.user-table .el-table__body tr:hover {
  background-color: #f8f9ff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-table .el-table__row {
  animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.custom-pagination {
  transition: opacity 0.3s ease;
}

.custom-pagination.is-disabled {
  opacity: 0.5;
}

.dialog-footer {
  text-align: right;
}

.role-assignment {
  padding: 10px 0;
}

.role-list {
  max-height: 300px;
  overflow-y: auto;
}

.role-list .el-checkbox {
  display: block;
  margin-bottom: 10px;
}

/* 表格操作按钮样式 */
.user-table .el-button {
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: 500;
  margin: 0 2px;
}

.user-table .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-table .el-button--small {
  padding: 4px 8px;
  font-size: 12px;
}

/* 标签样式优化 */
.user-table .el-tag {
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.user-table .el-tag:hover {
  transform: scale(1.05);
}

/* 状态标签特殊样式 */
.user-table .el-tag--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
}

.user-table .el-tag--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  color: white;
}
</style>
